import {Control} from "react-keeper";
require('./PageCourtSelect.less');

import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Utils from '../../../utils/index';
import {List, NavBar,Card,Button, Modal,Icon,  SearchBar ,Badge,WhiteSpace
} from 'antd-mobile';
import tpyh from '../../../assets/icon/用户S.png';
import tphouse from '../../../assets/icon/房子A.png';
import Store from './Store';

const Item = List.Item;
const Brief = Item.Brief;

class CourtSelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: false ,height: document.documentElement.clientHeight - 88};

    this.showModal = this.showModal.bind(this);
    this.onClose = this.onClose.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.ok = this.ok.bind(this);
  }

  handleChange(text, e){
    let keywords = [text];
    Actions.couSearchChange(keywords);
    this.setState({searchText:text});
  }

  ok(e) {
    this.props.onSelectCour(e);
    this.onClose();
  }

  onClose() {
    this.setState({
      visible: false,
    });
  }
  showModal() {
    this.setState({
      visible: true,
    });
  }

  render() {
    return (
      <div>
        <Button type="ghost" size="small" inline onClick={this.showModal}>
          选择
        </Button>
        <Modal
          closable
          title="小区"
          onClose={this.onClose}
          visible={this.state.visible}
        >

          <div>
            <SearchBar
              onChange={this.handleChange.bind(this)}
              defaultValue={this.state.searchText}
              placeholder="请输入小区名称"/>
          </div>
          <div style={{ height: this.state.height, overflow: 'scroll' }}>
            <List renderHeader={() => ''}>
              {
                this.state.cou.userInfo.courts.length > 0 ?
                  this.state.cou.userInfo.courts.map((item,i)=>{
                    return (
                      <div>
                        <Item
                          thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                          arrow="horizontal"
                          onClick={
                            (e)=>{
                              this.ok(item);
                            }
                          }
                        >{item.name}</Item>
                      </div>
                    )
                  })
                  :                         <Item
                    arrow="horizontal"
                    thumb={tphouse}
                    multipleLine
                    onClick={() => {}}
                    platform="android"
                  >
                    <a style={{ display: 'block', color: '#108ee9' }}>
                      小区:
                    </a>

                  </Item>
              }
            </List>
          </div>
        </Modal>
      </div>
    );
  }

  componentWillMount() {
    Actions.initMode();
  }

  componentDidMount() {
    Actions.couSearch();
    // Actions.enterInfo();
  }

  componentWillReceiveProps(nextProps) {

  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.cou || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

  componentWillUpdate(nextProps, nextState) {

  }


  componentDidUpdate(prevProps, prevState) {

  }


  componentWillUnmount() {

  }

}

ReactMixin.onClass(CourtSelect, Reflux.connect(Store, 'cou'));


export default CourtSelect ;
